<script>
import {
  defineComponent,
  reactive,
  toRefs
} from 'vue'

export default defineComponent({
  name: 'DirectionButton',
  props: {
    size: {
      type: Number,
      default: 16
    },
    direction: {
      type: String,
      default: 'top'
    }
  },
  setup() {
    const state = reactive({})

    return {
      ...toRefs(state)
    }
  }
})
</script>

<template>
  <div class="component-direction-button-container"
       :style="{ width: `${size}px`, height: `${size}px` }" :class="direction" />
</template>

<style lang="scss">
.component-direction-button-container {
  border: 1px solid #a8a7a7;
  border-radius: 2px;
  background-size: 40%;
  background-position: center center;
  background-repeat: no-repeat;
  user-select: none;
  cursor: pointer;

  &.top {
    background-image: url('../assets/components/direction-button--top.png');
  }

  &.bottom {
    background-image: url('../assets/components/direction-button--bottom.png');
  }

  &.left {
    background-image: url('../assets/components/direction-button--left.png');
  }

  &.right {
    background-image: url('../assets/components/direction-button--right.png');
  }

  &.left-top {
    background-image: url('../assets/components/direction-button--left-top.png');
  }

  &.left-bottom {
    background-image: url('../assets/components/direction-button--left-bottom.png');
  }

  &.right-top {
    background-image: url('../assets/components/direction-button--right-top.png');
  }

  &.right-bottom {
    background-image: url('../assets/components/direction-button--right-bottom.png');
  }

  &.center {
    background-image: url('../assets/components/direction-button--center.png');
  }
}
</style>
